<template>
  <el-menu class="main-menu"
    :default-active="$route.path"
    router
    mode="horizontal"
    background-color="primary"
    style="height: 100%">
    <el-menu-item
      class="func-menu-item"
      v-for="(item,i) in navList"
      :key="i"
      style="height: 100%;padding: 0;width: 10vw"
      :disabled="!item.isAllow.value"
      :index="item.name">
      <template slot="default" >
        <el-tooltip
          :disabled="item.isAllow.value"
          :content="item.isAllow.meaning">
          <div class="frozen-btn" style="height:100%">
            <el-button
              type="primary"
              :class="['dazzle-button', active==item.name?'purple':'green']"
              @click="handleActive(item.name)"
              :disabled="!item.isAllow.value"
            >{{item.navItem}}</el-button>
          </div>
        </el-tooltip>
      </template>
    </el-menu-item>
    <el-button
      icon="el-icon-switch-button"
      type="primary" class="login-out"
      @click="logOut"></el-button>
  </el-menu>
</template>

<script>
    export default {
        name: "NavMenu",
      data(){
          return{
            active:this.$route.path,
            navList:[]
          }
      },
      methods:{
          logOut(){
            console.log('loginOut')
            this.$store.commit('user/logout');
            let path = this.$route.query.redirect
            this.$router.replace({path: path === '/' || path === undefined ? '/login' : path})
          },
        handleActive(path){
          this.active=path;
        },
        getNav(){
          this.reload=!this.reload;
          return [
            {name:'/mainpage',navItem:'首页',isAllow:this.passAble('/mainpage')},
            {name:'/personalSpace',navItem:'个人中心',isAllow:this.passAble('/personalSpace')},
            //{name:'/purchaseControl',navItem:'系统手册',isAllow:this.passAble('/purchaseControl')},
            {name: '/cashierDesk',navItem: '收银台',isAllow:this.passAble('/cashierDesk')},

          ]
        },
        passAble(name){
          let permission={
            value:true,
            meaning: '通过',
          }
          switch (name){
            case '/purchaseControl':
              permission=this._func.isAllow(this._mytype.permission.Ppurchase,this);
              break;
            case '/salesManagement':
              permission=this._func.isAllow(this._mytype.permission.Pplan,this);
              break;
            case'/statementManagement':
              permission=this._func.isAllow(this._mytype.permission.Pplan,this);
              break;
            case'/cashierDesk':
              permission=this._func.isAllow(this._mytype.permission.Pcash,this);
              break;
            default:break
          }
          return permission;
        }
      },
      created() {
        this.isOnline = this.$store.state.staff.isOnline;
        console.log(this.isOnline)
        if (this.isOnline) {
          this.staff = {
            ...this.$store.state.staff
          }
        }
        this.navList=this.getNav();
      }
    }
</script>

<style src="../../assets/css/navBtn.scss" scoped>
</style>
